<template>
  <div class="body">
    <div class="header"></div>
    <div class="tablebar">
      <div class="logo"></div>
      <div class="title">
        <div class="school">
          <span id="chinese">皖 西 学 院 大学生软件创客实验室</span>
          <span id="english">West Anhui University Campus Software Innovators Lab</span>
        </div>
        <!-- <div class="lab">
          <span id="chinese">大学生软件创客实验室</span>
          <span id="english">Campus Software Innovators Lab</span>
        </div> -->
      </div>
      <div class="barList">
        <div class="index" id="bar" @click="index">首页</div>
        <div class="about" id="bar" @click="about">关于创客</div>
        <div class="RDcenter" id="bar" @click="RDcenter">研发中心</div>
        <div class="RDteam" id="bar" @click="RDteam">研发团队</div>
        <div class="Aicenter" id="bar" @click="Aicenter">AI能力中台</div>
        <div class="joinUs" id="bar" @click="joinUs">加入创客</div>
      </div>
    </div>
    <div class="main" :style="mainStyle">
      <!-- 使用动态样式绑定 -->
      <i class="el-icon-full-screen" @click="displayModel"></i>
      <swiper v-if="lucy" class="swiper" :options="swiperOption" ref="swiper">
        <swiper-slide
          ><component :is="competition" ref="competition"></component
        ></swiper-slide>
        <swiper-slide
          ><component :is="dynamics" ref="dynamics"></component
        ></swiper-slide>
        <swiper-slide
          ><component :is="attendance" ref="attendance"></component
        ></swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
    <div class="bottom">
      <span>创图永探青云志，客里勤磨赤子心。</span>
    </div>
  </div>
</template>
<script>
import competition from "./competition.vue";
import dynamics from "./dynamics.vue";
import attendance from "./attendance.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import config from '@/config'

export default {
  components: {
    competition,
    dynamics,
    attendance,
    Swiper,
    SwiperSlide,
  },
  data() {
    const that = this;
    return {
      flag: false, // 标记是否大屏变量
      lucy: true,
      swiperOption: {
        notNextTick: true,
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        loopedSlides: 6,
        //小手掌抓取滑动
        grabCursor: true,
        // 回调函数，当显示第一页时应该重新渲染，否则会出现数据不显示的问题
        on: {
          slideChangeTransitionStart: function () {
            if (this.realIndex === 0) {
              console.log(that.competitionKey);
              that.$forceUpdate();
            }
          },
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      mainStyle: {}, // 动态样式
    };
  },
  computed: {
    // 动态组件的引用
    competition() {
      return competition;
    },
    dynamics() {
      return dynamics;
    },
    attendance() {
      return attendance;
    },
  },
  methods: {

      Aicenter() {
        window.location.href = config.externalUrls.Aicenter;  // 跳转到 AI能力中台
      },
      joinUs() {
        window.location.href = config.externalUrls.joinUs;  // 跳转到 加入创客
      },
    displayModel() {
      var that = this;
      console.log("触发");
      // 如果flase 就切大屏 轮播
      if (this.flag == false) {
        this.lucy = false;
        this.swiperOption = {
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          loopedSlides: 6,
          //小手掌抓取滑动
          grabCursor: true,
          on: {
            slideChangeTransitionStart: function () {
              if (this.realIndex === 0) {
                console.log(that.competitionKey);
                that.$forceUpdate();
              }
            },
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          autoplay: {
            delay: 6000,
            disableOnInteraction: false,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        };
        setTimeout(() => {
          this.lucy = true;
          this.mainStyle = {
            width: "100vw", // 占据整个视口的宽度
            height: "100vh", // 占据整个视口的高度
            position: "fixed", // 固定定位，防止滚动
            top: 0,
            left: 0,
            zIndex: 2, // 确保在最上层
            backgroundColor: "#fff", // 可以根据需要调整背景色
          };
        }, 1);
        this.flag = true;
      } else {
        this.lucy = false;
        this.swiperOption = {
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          loopedSlides: 6,
          //小手掌抓取滑动
          grabCursor: true,
          on: {
            slideChangeTransitionStart: function () {
              if (this.realIndex === 0) {
                console.log(that.competitionKey);
                that.$forceUpdate();
              }
            },
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        };
        setTimeout(() => {
          this.lucy = true;
          this.mainStyle = {}; // 恢复默认样式
        }, 1);
        this.flag = false;
      }
    },
    index() {
      this.$router
        .push("/portalIndex")
        .then(() => {
          window.location.reload();
        })
        .catch(() => {});
    },
    about() {
      this.$router.push("/about").catch(()=>{});
    },
    RDcenter() {
      this.$router.push("/RDcenter").catch(()=>{});
    },
    RDteam() {
      this.$router.push("/RDTeam").catch(()=>{});
    },

  },
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 100%;
  width: 100%;
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    // font-size: 5%;
    // background-color: #ffffff;
  }
}
.body {
  display: flex;
  flex-direction: column; /* 使子元素垂直排列 */
  // background-color: rgb(255, 255, 255);
  background-image: url(../../assets/images/bac.jpg);
  width: 100%;
  height: 100%;
  background-size: cover; /* 图片正好填充 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中 */
}
.header {
  background-color: #94070a;
  width: 100%;
  height: 3%;
}
.tablebar {
  display: flex;
  height: 10%;
  width: 95%;
  margin: 0 auto;
  align-items: center; /* 垂直居中 */
}
.main {
  width: 95%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto; /* 使 .main 水平居中 */
  position: relative; /* 添加相对定位以使图标绝对定位相对于 .main */
}
.logo {
  background-image: url(../../assets/images/cksys.png);
  width: 8%;
  height: 96%;
  background-size: cover; /* 图片正好填充 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中 */
}
.title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20%;
  height: 85%;
  // font-size: 10%;
  // background-color: #ffffff;
  position: relative;
  font-weight: 600;
}
.school {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column; /* 使文本元素上下排列 */
  align-items: center; /* 垂直居中对齐 */
  font-size: clamp(5px, 6vw, 18px); // 使用 clamp 函数调整字体大小
}
#chinese {
  margin-right: 2%;
  font-family: "STXingkai", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: 600;
  font-size: 2.5vh;
}
#english {
  font-size: 2vh;
}
/* lab元素右下对齐 */
.lab {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column; /* 使文本元素上下排列 */
  align-items: center; /* 垂直居中对齐 */
  font-size: clamp(5px, 6vw, 17px); // 使用 clamp 函数调整字体大小

}
.barList {
  display: flex;
  justify-content: space-between; /* 子元素均匀分布 */
  width: 60%;
  height: 100%;
  margin-left: auto;
}
#bar {
  height: 100%;
  width: 15%;
  text-align: center; /* 文字水平居中 */
  display: flex;
  align-items: center; /* 文字垂直居中 */
  justify-content: center; /* 文字水平居中 */
  padding-top: 0; /* 移除原来的 padding-top */
  font-weight: 600;
  font-size: 2.5vh;

}
#bar:hover {
  background-color: rgba(255, 255, 255, 0.5); /* 白色透明背景 */
}
.bottom {
  width: 95%;
  height: 3%;
  margin: auto auto;
  font-family: "STXingkai", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: 600;
  color: #e5dddd;
}
.el-icon-full-screen {
  position: absolute;
  z-index: 3;
  top: 3%;
  right: 3%;
}
.el-icon-full-screen:hover {
  color: #ffffff;
}
</style>
